import {
  defineComponent,
  h,
  PropType,
  resolveComponent,
  VNode,
  watch,
} from 'vue';
import { getNestedRoutePath, useNamespace } from '@ibiz-template/vue3-util';
import { IPanelRawItem } from '@ibiz/model-core';
import { EventBase } from '@ibiz-template/runtime';
import { useRoute, useRouter } from 'vue-router';
import { NavPosController } from './nav-pos.controller';
import './nav-pos.scss';

export const NavPos = defineComponent({
  name: 'IBizNavPos',
  props: {
    modelData: {
      type: Object as PropType<IPanelRawItem>,
      required: true,
    },
    controller: {
      type: NavPosController,
      required: true,
    },
  },
  setup(props) {
    const c = props.controller;
    const ns = useNamespace('nav-pos');
    const onViewCreated = (event: EventBase): void => {
      c.onViewCreated(event);
    };

    const router = useRouter();
    const route = useRoute();

    c.setRouter(router);

    if (c.routeDepth) {
      // 计算当前导航视图对应层级路由的路径，删除了srfnav
      const expViewRoutePath = getNestedRoutePath(route, c.routeDepth!);
      watch(
        () => route.fullPath,
        () => {
          const currentRoutePath = getNestedRoutePath(route, c.routeDepth!);
          // 前面路由不是当前导航视图的不走
          // 路由跳转匹配层级不比导航视图层级高的不走。如分页关系的表单对应的事导航视图的路由。
          if (
            expViewRoutePath === currentRoutePath &&
            route.matched.length > c.routeDepth!
          ) {
            c.onRouteChange(route);
          }
        },
        { immediate: true },
      );
    }

    return { ns, c, onViewCreated };
  },
  render() {
    const { viewModals, state } = this.c;
    const { currentKey, cacheKeys, navViewMsgs, cache } = state;

    let content: VNode | null = null;
    if (this.c.routeDepth) {
      content = (
        <iBizRouterView
          manualKey={currentKey}
          modal={viewModals[currentKey]}
          onCreated={this.onViewCreated}
        >
          {({ Component }: { Component: string }): VNode | null => {
            const routerContent =
              currentKey === '' || !Component
                ? null
                : ((<Component />) as VNode);

            return cache ? (
              <keepAlive include={cacheKeys} max={30} isKey>
                {routerContent}
              </keepAlive>
            ) : (
              routerContent
            );
          }}
        </iBizRouterView>
      );
    } else {
      const view = currentKey
        ? h(resolveComponent('IBizViewShell'), {
            context: navViewMsgs[currentKey].context,
            params: navViewMsgs[currentKey].params,
            key: navViewMsgs[currentKey].key,
            viewId: navViewMsgs[currentKey].viewId,
            onCreated: this.onViewCreated,
          })
        : null;
      content = cache ? (
        <keepAlive include={cacheKeys} max={30} isKey>
          {view}
        </keepAlive>
      ) : (
        view
      );
    }

    return (
      <div
        class={[
          this.ns.b(),
          this.ns.m(this.modelData.id),
          ...this.controller.containerClass,
        ]}
      >
        {content}
      </div>
    );
  },
});
